<!DOCTYPE html>
<html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Vue基础</title>

</head>
<body>
<div id="abc">
    <button @mouseenter="count--">-</button>
<span>{{count}}</span>
<button v-on:click="count+=1">+</button>
<button @click="fn()">切换</button>
<h1 v-show="isShow">baise</h1>


<div class="box">
    <h3>小卖部</h3>
    <button @click="buy(5)">可乐5元</button>
<button @click="buy(10)">咖啡10元</button>
</div>
<p>银行卡余额{{money}}元</p>

<h3>水果店</h3>
<ul>
    <li v-for="(item,index)  in  List">
        {{ item }} - {{ index }}
    </li>
</ul>
</div>
<script src="./vue.js"></script>
<script>
    const app = new Vue({
    el: '#abc',
    data: {
    count:100,
    isShow:true,
    money:100,
    List: ['西瓜','苹果','桃子']
},
    methods:{
    fn(){
    app.isShow=!this.isShow
},
    buy(price){
    this.money-=price
}
}
})
</script>
</body>
</html>
